<template>
<div class="dashboard-container">

    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="名字"
        width="180">
      </el-table-column>

      <el-table-column
        prop="time"
        label="时间">
        <template slot-scope="scope">
          <el-time-picker
            is-range
            v-model="scope.row.time"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            @change="changeTime(scope)">
          </el-time-picker>
        </template>
      </el-table-column>


    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">      
        <el-switch
          v-model="scope.row.right"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="handle(scope)">
        </el-switch>
      </template>
    </el-table-column>

    </el-table>

</div>
</template>

<script>

import { getRight, saveRight } from '@/api/right'


export default {
    methods: {
      handle(scope) {
        console.log("handle")
        saveRight({
          "_id": this.list[scope.$index]["_id"],
          "right": this.list[scope.$index]["right"]
        }).then(response => {
          console.log(scope);
        })
      },
      changeTime(scope){
        console.log("changeTime")
        saveRight({
          "_id": this.list[scope.$index]["_id"],
          "time": this.list[scope.$index].time
        }).then(response => {
          console.log(scope);
        })
      }
    },
    created: function(){
      getRight().then(response => {
        console.log(response)
        this.list = response.rights
      })
    },
    data() {
      return {
        list: []
      };
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-container {
  margin: 10px;
}
</style>
